<template>
  <div class="g_warp product-box" @click="handlePushDetail(pInfo.id)">
    <div class="g_pointer p-top">
      <img class="p-identify" v-if="pInfo.isHot" src="@/assets/img/section_hot.png" alt="" />
      <img class="p-identify" v-else-if="pInfo.isNew" src="@/assets/img/section_new.png" alt="" />
      <img :src="pInfo.imgUrl" alt="" />
    </div>
    <div class="p-bottom">
      <div class="p-name">{{ pInfo.name }}</div>
      <div class="p-integral">{{ pInfo.integral }}积分</div>
      <div class="g_pointer p-btn">立即兑换</div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["pInfo"],
  methods: {
    handlePushDetail(id) {
      this.$router.push(`/productDetail?id=${id}`)
    }
  }
};
</script>
<style lang="less" scoped>
.product-box {
  width: 285px;
  margin-bottom: 20px;
  background: #fff;
  &:hover {
    transform: translateY(-12px);
    transition: transform 0.5s;

    .p-btn {
      background: #0a328e;
      color: #fff;
    }
  }
  .p-top {
    height: 250px;
    position: relative;
  }
  .p-top > img:first-child {
    width: 58px;
    height: 58px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .p-top > img:last-child {
    width: 285px;
    height: 250px;
  }
  .p-bottom {
    height: 162px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .p-name {
    margin-top: 22px;

    font-size: 18px;
    color: #333333;
  }
  .p-integral {
    margin-top: 16px;
    font-size: 18px;
    font-weight: bold;
    color: #fd604d;
  }
  .p-btn {
    margin-top: 20px;
    width: 100px;
    height: 36px;
    border: 1px solid #0a328e;
    font-size: 18px;
    color: #0a328e;
    line-height: 36px;
  }
  .p-btn:hover {
    background: #0a328e;
    color: #fff;
  }
}
</style>